import React, { useEffect, useState } from 'react'
import { Table, Popconfirm, Button, message, Modal } from 'antd';
import EmployeeInfo from '../../components/StaffManage/EmployeeList/EmployeeInfo';
import { ToolOutlined, DeleteOutlined } from '@ant-design/icons'
import MyPagination from '../../components/common/MyPagination';
import Service from '../../service';
import { inject, observer } from 'mobx-react'
import { toJS } from 'mobx';



function EmployeeList(props) {
    const confirm = async (id) => {
        const user_id = id
        console.log(user_id);
        const result = await Service.StaffManage.EmployeeList.delList({ user_id })
        console.log(result);
        if (result.code === 200) {
            message.success('删除成功');

            props.departmentSettingsStore.getList()
        }
    };

    const cancel = (e) => {
        message.error('取消删除');
    };
    const delEmployee = async (record) => {
        console.log(record.user_id);

    }
    const columns = [
        {
            title: <strong>账号</strong>,
            dataIndex: 'account',
            key: 'key',
            align: 'center',
            render: (text) => <div >{text}</div>,
        },
        {
            title: <strong>姓名</strong>,
            dataIndex: 'user_name',
            key: 'key',
            align: 'center',
            render: (text) => <div >{text}</div>,
        },
        {
            title: <strong>手机号码</strong>,
            dataIndex: 'phone_number',
            align: 'center',
            key: 'key',
            render: (text) => <div >{text}</div>,
        },
        {
            title: <strong>部门</strong>,
            dataIndex: 'department',
            align: 'center',
            key: 'key',
            render: (text) => <div >{text}</div>,
        },
        {
            title: <strong>职位</strong>,
            dataIndex: 'user_role',
            align: 'center',
            key: 'key',
            render: (text) => <div >{text}</div>,
        },
        {
            title: <strong>客户数量限制</strong>,
            dataIndex: 'customer_quantity_limit',
            align: 'center',
            key: 'key',
            render: (text) => <div >{text}</div>,
        },
        {
            title: <strong>员工提成</strong>,
            dataIndex: 'commission',
            align: 'center',
            key: 'key',
            render: (text, record) => {
                if (record.key === '1') {
                    return <div >—</div>
                } else {
                    return <div> <span style={{ color: 'red' }}>{text}</span>%</div>
                }
            },
        },
        {
            title: <strong>状态</strong>,
            dataIndex: 'status',
            align: 'center',
            key: 'key',
            render: (text, record) => {
                if (record.key === 1) {
                    return <div >正常</div>
                } else if (text === 1) {
                    return <div onClick={() => changeState(record)} style={{ backgroundColor: '#29a883', color: 'white', borderRadius: '3px' }}>正常</div>
                } else {
                    return <div onClick={() => changeState(record)} style={{ backgroundColor: '#dc6179', color: 'white', borderRadius: '3px' }}>已禁用</div>
                }
            },
        },
        {
            title: <strong>管理</strong>,
            // onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            key: 'id',
            align: 'center',
            render: (text, record) => {
                if (record.key === 1) {
                    return <div>超级管理员</div>
                } else {
                    return <div>
                        <Button onClick={() => showModal(record)} style={{ backgroundColor: '#5596cd', color: 'white', marginRight: '10px' }} size='small' ><ToolOutlined /> 修改</Button>
                        <Popconfirm
                            title={`确定删除${record.user_name}吗?`}
                            onConfirm={() => confirm(record.user_id)}
                            onCancel={cancel}
                            okText="是"
                            cancelText="否"
                        >
                            <Button onClick={() => delEmployee(record)} style={{ backgroundColor: '#f52e31', color: 'white' }} size='small'><DeleteOutlined />删除</Button>
                        </Popconfirm>
                    </div>
                }
            }

        },
    ];
    const changeState = async (record) => {
        const user_id = record.user_id
        const status = record.status
        const res = await Service.StaffManage.EmployeeList.upState({ status, user_id })
        console.log(res);
        if (res.code === 200) { message.success('改变状态成功'); }
        props.departmentSettingsStore.getList()

    }


    const [isUpdateModalVisible, setisUpdateModalVisible] = useState(false);
    const [info, setInfo] = useState([])
    const showModal = (props) => {
        console.log(props);
        setInfo(toJS(props))
        setisUpdateModalVisible(true);

    };

    const handleOk = async () => {
        const data = props.departmentSettingsStore.upUserInfo
        const result = await Service.StaffManage.EmployeeList.upList(data)
        console.log(result);
        if (result.code === 200) {
            message.success('修改成功');
            props.departmentSettingsStore.getList()
        }

        setisUpdateModalVisible(false);


    };
    const handleCancel = (props) => {

        setisUpdateModalVisible(false);

    };

    const onPageChange = (page, size) => {
        props.departmentSettingsStore.setCurrent_page(page)
        props.departmentSettingsStore.setPage_size(size)
    }


    useEffect(() => {
        props.departmentSettingsStore.getList()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props.departmentSettingsStore.current_page, props.departmentSettingsStore.page_size])

    return (
        <div style={{ paddingTop: '20px' }}>

            <Table pagination={false} bordered={true} columns={columns} dataSource={props.departmentSettingsStore.data} className="depart_table" />
            <Modal style={{ minWidth: '800px' }} width='40%' okText="保存" cancelText="取消" title="修改账号" visible={isUpdateModalVisible} onOk={() => handleOk('add')} onCancel={() => handleCancel('add')}>
                <EmployeeInfo info={info} />
            </Modal>
            <MyPagination total={props.departmentSettingsStore.total} onPageChange={onPageChange} />
        </div>
    )
}
export default inject('departmentSettingsStore')(observer(EmployeeList))
